<template>
	<view >
		<picker :range="listArray" range-key="val" mode=selector @change="changeRow" selector-type="auto">
			<view class="row">
				<view class="col-auto mr-10" :class=" name ? '' : 'c-bbb'">{{ name || placeholder }}</view>
				<view class="iconfont icon-unfold"></view>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name: "gt-select",
		props: {
			value: {
				type: [Number, String],
				default: function() {
					return ''
				}
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			list: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			}
		},
		created() {},
		data() {
			return {
				name: ''
			}
		},
		computed: {
			listArray() {
				var arr = [
					{key:'',val:this.placeholder}
				];
				for (var i in this.list) {
					let row = this.list[i];
					if(typeof row == 'object' && row.key !== undefined && row.val !== undefined){
						arr.push(row);
						if(row.key === this.value){
							this.name = row.val;
						}
					}else{
						arr.push({
							key: i,
							val: row
						});
						if(i === this.value){
							this.name = row;
						}
					}
					
				}
				// console.log(arr);
				return arr;
			}
		},
		methods: {
			changeRow(e) {
				var row = this.listArray[e.detail.value];
				if (row == '') {
					this.name = this.placeholder
				} else {
					this.name = row.val
				}
				this.$emit('update:value', row.key)
				this.$emit('change',row.key)
			}
		}
	}
</script>

<style>

</style>
